<template>
	<!-- 机器使用上报 -->
	<view class="container">
		<c-navBar title="机器使用上报" isPerch></c-navBar>
		<view class="content">
			<u--form labelPosition="left" labelWidth="auto" :rules="rules" :labelStyle="labelStyle" :model="form"
				ref="formRef">
				<u-form-item label="所属项目" prop="projectId" borderBottom required @click="selectPrject">
					<u-input v-model="project.projectName" disabled inputAlign="right" border="none"
						placeholderClass="placeholder" placeholder="请选择所属项目">
						<template #suffix>
							<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png"
								mode="scaleToFill" />
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="机器名称" prop="machineId" borderBottom required @click="selectType">
					<u-input v-model="form.name2" inputAlign="right" border="none" disabled
						placeholderClass="placeholder" placeholder="请选择机器名称">
						<template #suffix>
							<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png"
								mode="scaleToFill" />
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="机器编号" prop="machineId" borderBottom required @click="selectType">
					<u-input v-model="form.name3" inputAlign="right" border="none" disabled
						placeholderClass="placeholder" placeholder="请选择机器编号">
						<template #suffix>
							<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png"
								mode="scaleToFill" />
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="机器型号" prop="machineId" borderBottom required @click="selectType">
					<u-input v-model="form.name4" inputAlign="right" disabled border="none"
						placeholderClass="placeholder" placeholder="请选择机器型号">
						<template #suffix>
							<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png"
								mode="scaleToFill" />
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="预计使用开始时间" prop="name6" borderBottom required @click="selectStartTime('name6')">
					<u-input v-model="form.name6" inputAlign="right" disabled border="none"
						placeholderClass="placeholder" placeholder="请选择预计使用开始时间">
						<template #suffix>
							<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png"
								mode="scaleToFill" />
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="预计使用结束时间" prop="name7" borderBottom required @click="selectEndTime('name7')">
					<u-input v-model="form.name7" inputAlign="right" disabled border="none"
						placeholderClass="placeholder" placeholder="请选择预计使用结束时间">
						<template #suffix>
							<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png"
								mode="scaleToFill" />
						</template></u-input>
				</u-form-item>
				<u-form-item label="工作内容" prop="startMessage" labelPosition="top" required>
					<textarea v-model="form.startMessage" class="textarea" border="none" placeholderClass="placeholder"
						placeholder="请输入工作内容"></textarea>
				</u-form-item>
			</u--form>
		</view>

		<!-- 项目弹窗 -->
		<!-- <c-project :projectShow.sync="projectShow" :value.sync="project" @confirm="confirmPro"></c-project> -->
		<c-check title="添加项目" :show="projectShow" @determine="confirmPro" field="projectName" :dataList="projectList"
			@close="projectShow = false"></c-check>

		<!-- 机器型号弹窗 -->


		<c-check title="添加机器" :show="typeShow" field="popName" :dataList="machineList" @determine="confirmType"
			@close="typeShow = false"></c-check>

		<!-- 时间选择器 -->
		<u-datetime-picker :show="timeShow" :matchField="form.machineId" v-model="value1" @cancel="timeShow = false"
			mode="datetime" @confirm="confirmTime"></u-datetime-picker>


		<view class="btn-box">
			<view class="btn" @click="report">{{ id ? '重新上传' : '确认上报' }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				projectList: [],
				project: null,
				form: {
					id: '',
					projectId: '',
					machineId: '',
					startMessage: '',
					useStatus: '1',
					startStatus: '3',
					name2: '',
					name3: '',
					name4: '',
					name6: '',
					name7: '',
				},
				labelStyle: {
					fontWeight: '500',
					fontSize: '32rpx',
					color: '#1A1A1A'
				},
				rules: {
					projectId: [{
						required: true,
						message: '请选择所属项目',
						trigger: 'change'
					}, ],
					machineId: [{
						required: true,
						message: '请选择使用机器',
						trigger: 'change'
					}, ],
					name6: [{
						required: true,
						message: '请选择预计使用开始时间',
						trigger: 'change'
					}, ],
					name7: [{
						required: true,
						message: '请选择预计使用结束时间',
						trigger: 'change'
					}, ],
					startMessage: [{
						required: true,
						message: '请输入工作内容',
						trigger: 'change'
					}, ],

				},
				projectShow: false,
				typeShow: false,
				timeShow: false,
				value1: Number(new Date()),
				filed: 'name6',
				machineList: [],
				id: ''
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.formRef.setRules(this.rules)
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.getMachineTaskDetail()
			}
		},
		watch: {
			form: {
				handler(newValue, oldValue) {
					this.$refs.formRef.validate().catch(err => {
						console.log(err);
					});
				},
				deep: true,
			},
		},
		onShow() {},
		methods: {
			//机器使用上报详情
			getMachineTaskDetail() {
				uni.showLoading({
					title: '加载中'
				});
				this.$api.machineTaskDetail({
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.form.id = res.data.id
						this.project = res.data.project
						this.form.projectId = res.data.project.id
						this.form.machineId = res.data.machine.id
						this.form.name2 = res.data.machine.machineName
						this.form.name3 = res.data.machine.machineNumber
						this.form.name4 = res.data.machine.machineType
						this.form.name6 = res.data.expectedTime.split('-')[0]
						this.form.name7 = res.data.expectedTime.split('-')[1]
						this.form.startMessage = res.data.startMessage
						console.log(this.form.name6, this.form.name7);
						console.log('机器使用上报详情', res)
						// this.machineTaskDetail = res.data;
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},

			findNthIndex(str, char, n) {
				let count = 0;
				for (let i = 0; i < str.length; i++) {
					if (str[i] === char) {
						count++;
						if (count === n) {
							return i;
						}
					}
				}
				return -1; // 如果没有找到第 n 个字符，返回 -1
			},

			// 确认上报
			report() {
				this.$refs.formRef.validate().then(res => {
					// uni.$u.toast('校验通过')
					// this.form.projectId = this.project?.id;
					this.form.expectedTime = this.form.name6 + '-' + this.form.name7;
					this.$api.machineTaskUpdate(this.form).then(res => {
						if (res.code == 200) {
							console.log('上报成功')
							if (this.id) {
								uni.reLaunch({
									url: '/pages/home/reportList'
								})
							} else {
								uni.navigateBack()
							}
						}
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})


			},
			// 获取机器列表
			selectType() {
				if (!this.project) {
					return uni.showToast({
						title: '请选择项目',
						icon: 'none'
					})
				} else {
					this.typeShow = true
					this.$api.machineList({
						projectId: this.project.id,
						machineStatus: '1',
					}).then(res => {
						if (res.code == 200) {
							this.machineList = res.data.map(item => {
								item.popName = item.machineName + ' ' + item.machineNumber + ' ' + item
									.machineType
								return item
							});
						}
					})
				}
			},
			// 选择项目
			confirmPro(v) {
				this.project = v
				this.form.projectId = v.id
				this.projectShow = false
			},


			// 点击选择所属项目
			selectPrject() {
				this.$api.projectList({}).then(res => {
					if (res.code == 200) {
						console.log(res);
						this.projectList = res.data;
						this.projectShow = true
					}
				})
			},
			// 点击选择机器型号
			// selectType() {
			// 	this.typeShow = true
			// },
			// 确认机器型号
			confirmType(v) {
				console.log(v, '数据');
				this.form.machineId = v.id
				this.form.name2 = v.machineName
				this.form.name3 = v.machineNumber
				this.form.name4 = v.machineType
				this.typeShow = false
			},
			// 选择开始时间
			selectStartTime(type) {
				this.timeShow = true
				this.filed = type
			},
			// 选择结束时间
			selectEndTime(type) {
				console.log(this.form.name6);

				this.filed = type
				if (!this.form.name6.toString()) {
					return uni.showToast({
						title: '开始时间不能为空',
						icon: 'none'
					})
				}
				this.timeShow = true
			},
			confirmTime({
				value
			}) {
				if (this.filed == 'name7' && !!this.form.name6) {
					if (value <= new Date(this.form.name6).getTime()) {
						return uni.showToast({
							title: '结束时间不能小于开始时间',
							icon: 'none'
						})
					}
				} else if (this.filed == 'name6' && !!this.form.name7) {
					if (new Date(this.form.name7).getTime() <= value) {
						return uni.showToast({
							title: '结束时间不能小于开始时间',
							icon: 'none'
						})
					}
				}
				this.form[this.filed] = this.$fn.formatTime(value, 'yyyy.MM.dd HH:mm')
				this.timeShow = false
			},
			onReady() {
				this.$refs.formRef.setRules(this.rules)
			},

		}
	}
</script>

<style scoped lang="scss">
	.container {
		.content {
			padding: 0 32rpx;
			padding-bottom: 200rpx;

			/deep/ .placeholder {
				font-weight: 400;
				font-size: 28rpx;
				color: #999 !important;
			}

			/deep/ .u-input__content {
				background: #fff;
			}

			.textarea {
				margin-top: 30rpx;
				width: 94%;
				height: 200rpx;
				background: #FAFAFA;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				margin-bottom: 32rpx;
				padding: 24rpx;
			}


		}

		.popup-box {
			padding: 40rpx 32rpx;
			height: 500rpx;

			.box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;


				.tilte {
					font-weight: bold;
					font-size: 32rpx;
					color: #1A1A1A;
				}

				.img {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.item {
				display: flex;
				align-items: center;

				.img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>